<template>
    <div>
        <div class="message-section">
            <div class="message" @click="navigatToChat">
                <div class="portrait">
                    <img class="user-portrait" :src="userMessage.toUserImg" v-if="userMessage.toUserImg">
                    <img class="user-portrait" src="../../assets/default_img.jpg" v-else>
                    <span class="message-check" v-if="userMessage.needCheck>0">{{userMessage.needCheck}}</span>

                </div>
                <div class="user">
                    <span class="split-line"></span>
                    <span class="user-name">{{userMessage.toUserName}}</span>
                    <span class="user-message">{{userMessage.lastMessage}}</span>
                    <span class="date">{{userMessage.date}}</span>
                    <span class="split-line"></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ["userMessage"],
        data() {
            return {
                userInfo: ""
            }
        },
        methods: {
            navigatToChat() {
                this.userMessage.myUUID = this.userInfo.uuid
                this.$socket.emit('email', this.userMessage)
                this.$router.push({path: "/chat", query: {message: JSON.stringify(this.userMessage)}})
            }
        },
        mounted() {
            this.$http.get("/user/userinfo").then((res) => {
                this.userInfo = res.data.data
            })
        }
    }
</script>

<style lang="scss">
    .message-section {
        .message {
            display: flex;
            align-items: center;

            .portrait {
                .user-portrait {
                    width: 40px;
                    height: 40px;
                    border: 1px solid white;
                    border-radius: 50%;
                }

                .message-check {
                    position: absolute;
                    font-size: 2px;
                    padding: 1px;
                    color: white;
                    line-height: 12px;
                    text-align: center;
                    background: red;
                    width: 11px;
                    height: 11px;
                    border-radius: 50%;
                }
            }


            .user {
                width: 100%;
                margin-left: 10px;
                display: flex;
                flex-direction: column;

                .user-name {
                    font-size: 18px;
                    color: rgba($color: #000000, $alpha: 1.0);
                    margin-top: 2px;
                    margin-bottom: 2px;
                }

                .user-message {
                    color: rgba($color: #000000, $alpha: .6);
                    font-size: 13px;
                    margin-bottom: 2px;
                }

                .date {
                    color: rgba($color: #000000, $alpha: .6);

                    font-size: 13px;
                    position: absolute;
                    right: 50px;
                }

                .split-line {
                    border-top: 1px solid rgba($color: #bfbfbf, $alpha: .7);
                    width: 100%;
                }
            }
        }
    }
</style>

